<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <base href="<%=basePath%>">
	<%@include file="/jsp/common/jspCommonHeadSetting.jsp"%>
	<title>network</title>
  </head>
  
<html>       
   <body>    
        <script type="text/javascript">    
var links = [  
  {source: "Samsung", target: "Kodak", type: "resolved"        ,weight:8,color:243},    
  {source: "LG", target: "Kodak", type: "resolved"             ,weight:1,color:43},     
  {source: "RIM", target: "Kodak", type: "suit"                ,weight:5,color:13},     
  {source: "Sony", target: "LG", type: "suit"                  ,weight:3,color:351},    
  {source: "Kodak", target: "LG", type: "resolved"             ,weight:4,color:1},       
  {source: "Apple", target: "Nokia", type: "resolved"          ,weight:1,color:1},      
  {source: "Qualcomm", target: "Nokia", type: "resolved"       ,weight:3,color:4},      
  {source: "Apple", target: "Motorola", type: "suit"           ,weight:4,color:6},      
  {source: "Microsoft", target: "Motorola", type: "suit"       ,weight:6,color:65},     
  {source: "Motorola", target: "Microsoft", type: "suit"       ,weight:3,color:76},     
  {source: "Huawei", target: "ZTE", type: "suit"               ,weight:8,color:879},    
  {source: "Ericsson", target: "ZTE", type: "suit"             ,weight:7,color:989},    
  {source: "Kodak", target: "Samsung", type: "resolved"        ,weight:9,color:643},    
  {source: "Apple", target: "Samsung", type: "suit"            ,weight:1,color:54},     
  {source: "Kodak", target: "RIM", type: "suit"                ,weight:3,color:54},     
  {source: "Nokia", target: "Qualcomm", type: "suit"           ,weight:4,color:45}     
];                                                                  
                                                                    
var nodes = {};                                                     
                                                                    
              
links.forEach(function(link) {
console.log(nodes);                                    
  link.source = nodes[link.source]  
  || (nodes[link.source] = {name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});  
});  
  
var width = 960,  
    height = 500;  
  
var force = d3.layout.force()  
    .nodes(d3.values(nodes))  
    .links(links)  
    .size([width, height])  
    .linkDistance(60)  
    .charge(-300)  
    .on("tick", tick)  
    .start();  
  
var svg = d3.select("body").append("svg")  
    .attr("width", width)  
    .attr("height", height);  
 
var link = svg.selectAll(".link")  
    .data(force.links())  
    .enter().append("line")  
    .attr("class", "link");  
  
var colors=d3.scale.category20();   
     
link.style("stroke",function(d){
    return colors(d.color);    
})    
.style("stroke-width",function(d,i){ 
     return Math.sqrt(d.value);   
});   
var node = svg.selectAll(".node")  
    .data(force.nodes())  
    .enter().append("g") 
    .attr("class", "node")  
    .on("mouseover", mouseover) 
    .on("mouseout", mouseout)  
    .call(force.drag);
                            
function  radius (d){   
if(!d.weight){
d.weight=1;  
}                                                
    return Math.log(d.weight)*10+5;                                     
}                                                                     
node.append("circle")  
    .attr("r",function(d){                     
    return radius (d);                            
 })                                             
.style("fill",function(d){        
    return colors(d.weight);  
}) ;  
  
node.append("text") 
    .attr("x", 12)  
    .attr("dy", ".35em")  
    .text(function(d) { return d.name; }); 
  
function tick() {  
  link  
      .attr("x1", function(d) { return d.source.x; })  
      .attr("y1", function(d) { return d.source.y; })  
      .attr("x2", function(d) { return d.target.x; })  
      .attr("y2", function(d) { return d.target.y; });  
  
  node  
      .attr("transform", function(d) {   
            return "translate(" + d.x + "," + d.y + ")";   
      });  
}  
  
function mouseover() {  
  d3.select(this).select("circle").transition()  
      .duration(750)  
      .attr("r", function(d){                     
    return radius (d)+10;                            
 }) ;  
}  
  
function mouseout() {  
  d3.select(this).select("circle").transition()  
      .duration(750)  
      .attr("r", function(d){                        
    return radius (d);                            
 }) ;  
}  
        </script>    
    
    </body>    

</html>
